<template>
  <UserOption></UserOption>
  <ProductActivationList></ProductActivationList>
  <TeacherTasksClassList @GetTeacherOrStudentIndex="GetTeacherOrStudentIndex"
    @GetClassSpecificInformations="GetClassSpecificInformations" ref="RefChilde"></TeacherTasksClassList>
  <TeacherClassInformation :ClassProbablyInformation="State.ClassProbablyInformation"></TeacherClassInformation>
  <TeacherClassCode :TeacherCode="State.TeacherCode"></TeacherClassCode>
  <TeacherTaskStudentList :ClassStudentAllArr="State.ClassStudentAllArr"></TeacherTaskStudentList>
  <div :class="isSearch ? 'SearchClick' : 'Search'">
    <img class="searchBtn" src="../../public/img/搜索.png" alt="">
    <form action="">
      <input class="searchIpt" placeholder="搜索" type="text" @focus="IptFocus" @blur="IptBlur" v-model="searchVal"
        @input="IptChange" @keydown.enter="handleEnter">
    </form>
    <img class="searchClose" v-show="searchVal != ''" src="../../public/img/关闭.png" @click="cancelSearch" alt="">
  </div>
</template>

<script>
import TeacherClassCode from "@/components/teacher/TeacherClassCode.vue";
import TeacherTasksClassList from "@/components/teacher/TeacherTasksClassList.vue";
import TeacherClassInformation from "@/components/teacher/TeacherClassInformation.vue";
import TeacherTaskStudentList from "@/components/teacher/TeacherTaskStudentList.vue";
import { defineComponent, reactive, onMounted, ref } from "vue";
import { postData } from "../assets/js/pubilcs.js";
import bus from "@/bus.js";
import router from '@/router'
import HomeContent from "@/components/HomeContent";
export default defineComponent({
  name: "ClassManagement",
  components: {
    TeacherTasksClassList,
    TeacherClassInformation,
    TeacherClassCode,
    TeacherTaskStudentList
  },
  setup() {
    let isSearch = ref(false)
    let pratuctArr = []
    let searchVal = ref('')
    //子组件
    let RefChilde = ref(null)
    let State = reactive({
      TeacherClassInformation: [],
      TeacherCode: "",
      //班级具体信息
      ClassSpecificInformation: '',
      //班级大概信息
      ClassProbablyInformation: {},
      //学生所有信息
      ClassStudentAllArr: [],
    });
    bus.$off('UpdateHomeTaskPanel')
    //不同组件传值
    bus.$on('UpdateHomeTaskPanel', (data) => {
      if (data === 'Updates') {
        if (router.currentRoute.value.name === 'ClassManagement') {
          //获取班级具体信息
          GetTeacherClassInformation(0)
          //获取班级
          RefChilde.value.GetTeacherAllClass()
        }
      }
    })
    //获取班级具体的信息
    function GetTeacherClassInformation(index) {
      let userid = sessionStorage.getItem("userid")
      let ProductId = sessionStorage.getItem("productId")
      postData("/api/CourseManage/GetCourseByCreatorId", JSON.stringify({ creatorId: userid, productId: ProductId }), sessionStorage.getItem("token"))
        .then(function (rep) {

          if (rep.success && rep.result.result.courseGroup) {
            //储存所有的班级信息
            State.TeacherClassInformation = rep.result.result.courseGroup
            // bus.$emit('classid',State.TeacherClassInformation[0].id)
            //获取班级码
            State.TeacherCode = State.TeacherClassInformation[index].inviteCode
            //班级的大概信息
            State.ClassProbablyInformation =
            {
              id: State.TeacherClassInformation[index].id,
              name: State.TeacherClassInformation[index].name,
              creationTime: State.TeacherClassInformation[index].creationTime,
              userCount: State.TeacherClassInformation[index].userCount,
              teacher: sessionStorage.getItem("UserName")
            }
            //默认传入第一个班级的ID
            let classid = rep.result.result.courseGroup[index].id;
            bus.$emit('classid', classid)
            postData("/api/User/GetUsersByCourseId", JSON.stringify({ courseId: classid, productId: sessionStorage.getItem("productId") }), sessionStorage.getItem("token"))
              .then(function (students) {
                State.ClassStudentAllArr = students.result.result.userGroup;
              })
              .catch((error) => {

              });
          } else {
            //没有数据时执行的操作
            State.TeacherCode = ''
            State.ClassProbablyInformation = {}
            State.ClassStudentAllArr = []
          }
        })
        .catch((error) => {
        });
    }
    //获取子组件传过来的index的值
    function GetTeacherOrStudentIndex(index) {
      //通过传过来的值设定班级码
      State.TeacherCode = State.TeacherClassInformation[index].inviteCode
      //通过传过来的班级index来获取数据
      GetTeacherClassInformation(index)
    }
    //获取传过来的具体值
    function GetClassSpecificInformations(data) {
      State.ClassSpecificInformation = data
      State.ClassStudentAllArr = data
    }

    // 搜索聚焦
    function IptFocus() {
      HomeContent.Default.searchVal.value = searchVal.value
      isSearch.value = true
      pratuctArr.value = JSON.parse(sessionStorage.getItem("shouyeDate"))
    }
    // 搜索失焦
    function IptBlur() {
      HomeContent.Default.searchVal.value = searchVal.value
      if (HomeContent.Default.searchVal.value == '') {
        isSearch.value = false
      }
    }
    // 搜索改变
    async function IptChange() {
      HomeContent.Default.searchVal.value = searchVal.value
      HomeContent.Default.searchList.value = []
      if (HomeContent.Default.searchVal.value == '') {
        isSearch.value = false
      }
      pratuctArr.value.forEach(element => {
        if (element.shortName.includes(HomeContent.Default.searchVal.value) || element.number.slice(-3).includes(HomeContent.Default.searchVal.value)) {
          HomeContent.Default.searchList.value.push(element)
        }
      });
    }
    // 取消搜索
    function cancelSearch() {
      searchVal.value = ''
      HomeContent.Default.searchVal.value = ''
      console.log('清空时的点击产品', sessionStorage.getItem('productIdex'));
    }
    // enter事件
    function handleEnter(event) {
      event.preventDefault(); // 阻止默认行为
      console.log('搜索的enter键盘', event);
    }
    onMounted(() => {
      if (HomeContent.Default.searchVal.value != '') {
        searchVal.value = HomeContent.Default.searchVal.value
        IptFocus()
        IptChange()
      } else {
        HomeContent.Default.searchVal.value = searchVal.value
      }
    });
    return {
      State,
      GetTeacherClassInformation,
      GetTeacherOrStudentIndex,
      GetClassSpecificInformations,
      RefChilde,
      // ======
      isSearch,
      IptFocus,
      IptBlur,
      IptChange,
      cancelSearch,
      searchVal,
      pratuctArr,
      handleEnter,
    };
  },
});
</script>
<style lang="less">
.Search {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  border: 1px solid #DCDFE6;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #ABABAB;
  display: -webkit-inline-box;
  z-index: 1000;
}

.SearchClick {
  width: 728px;
  height: 42px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #3389EC;
  position: absolute;
  top: 8px;
  left: 138px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #080808;
  display: -webkit-inline-box;
  z-index: 1000;
}

.searchIpt {
  width: 640px;
  height: 40px;
  border: none;
}

.searchIpt::placeholder {
  color: #DCDFE6;
}

.searchIpt:focus-visible {
  outline: none;
  color: #080808;
}

.searchBtn {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}

.searchClose {
  width: 15px;
  height: 15px;
  margin: 13px 14px 13px 14px;
}
</style>
